<template>
	<div class="layout-padding fillings-container">
		<HyTable
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			:searchConfig="searchConfig"
			:searchFields="searchFields"
			:searchDefault="searchDefault"
			:buttonConfig="buttonConfig"
			ref="hyTableRef"
		>
			<template #domainSlot="{ row }">
				{{ formatDomain(row.domain) }}
			</template>
			<template #proSlot="{ row }"> {{ row.commentCount }}/{{ row.goalCount }} </template>
			<template #commentSlot="{ row }">
				<el-tag class="start-tag" v-if="row.userCommentFlag == 0"> 待评审 </el-tag>
				<el-tag class="agree-tag" v-else-if="row.userCommentFlag == 1 && row.commentCount == row.goalCount"> 评审完成 </el-tag>
				<el-tag class="wait-tag" v-else> 评审中 </el-tag>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="130">
					<template #default="{ row }">
						<el-button text icon="View" type="primary" @click="showDetails(row, '查看')" v-if="row.userCommentFlag == 1">查看</el-button>
						<el-button text color="#a593e0" plain icon="Document" @click="showDetails(row, '填写评价')" v-else>填写评价</el-button>
					</template>
				</el-table-column>
			</template>
		</HyTable>
	</div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRouter } from 'vue-router';
import HyTable from '/@/components/HyTable/components/TableLayout/default.vue';
import { commentList } from '/@/api/acceptance';
import { useDict } from '/@/hooks/dict';

export default defineComponent({
	name: 'evaluation',
	components: { HyTable },
	setup() {
		const router = useRouter();
		const { belong_domain: APP_DOMAIN, opinion_status: OPTIONSTATUS } = useDict('belong_domain', 'opinion_status');
		const tableColumns = computed(() => {
			return [
				{ prop: 'app_code', label: '数字化应用编号', width: 300 },
				{ prop: 'app_name', label: '数字化应用名称', width: 300 },
				{ prop: 'domain', label: '所属领域' },
				{ prop: 'responsible_dept', label: '责任部门' },
				{ prop: 'create_time', label: '验收时间' },
				{ prop: 'commentCount', label: '评价进度', slot: 'proSlot' }, //
				{ prop: 'commentFlag', label: '状态', slot: 'commentSlot',fixed:'right',width:160 },
			];
		});
		const tableConfig = computed(() => {
			return {
				request: commentList,
				showSearch: true,
				isCostomTop: false,
				title: '应用评价',
				defaultData: [],
			};
		});
		const searchConfig = ref({
			labelWidth: '120px',
			span: 6,
			offset: 0,
			type: 'search',
			title: '应用评价',
			show: true,
		});
		// 配置搜索
		const searchFields = computed(() => {
			return {
				name: {
					type: 'input',
					label: '关键字',
					span: 8,
					placeholder: '请输入关键字进行模糊搜索',
				},
				status: {
					type: 'select',
					label: '状态',
					span: 8,
					placeholder: '请选择状态',
					options: [
						{ label: '待评审', value: '1' },
						{ label: '评审中', value: '2' },
						{ label: '评审完成', value: '3' },
					],
				},
				timeArr: {
					type: 'date',
					span: 8,
					picker: 'datetimerange',
					label: '验收时间',
				},
				// beginTime: {
				//   type: 'date',
				//   picker: 'datetime',
				//   label: '开始日期',
				//   span: 6,
				//   placeholder: '请输入开始日期'
				// },
				// endTime: {
				//   type: 'date',
				//   picker: 'datetime',
				//   span: 6,
				//   label: '结束日期',
				//   placeholder: '请输入结束日期'
				// },
			};
		});
		const buttonConfig = computed(() => {
			return {
				span: 24,
				offset: 20,
			};
		});
		const searchDefault = ref({});
		function showDetails(row, type) {
			if (type == '查看') {
				router.push({
					path: '../detail/acceptance',
					query: {
						id: row.declare_id,
						implementationId: row.implementation_id,
						appCode: row.app_code,
						pageType: 3,
						tagsViewName: '应用评价详情',
					},
				});
			} else {
				router.push({
					path: '../detail/acceptance',
					query: {
						id: row.declare_id,
						implementationId: row.implementation_id,
						appCode: row.app_code,
						pageType: 3,
						tagsViewName: '应用评价详情',
						state: 1,
					},
				});
			}
		}
		function formatDomain(val) {
			const rowArr = APP_DOMAIN.value.filter((item) => item.value == val);
			return rowArr.length && rowArr[0].label;
		}
		return {
			tableColumns,
			tableConfig,
			searchFields,
			searchConfig,
			searchDefault,
			buttonConfig,
			showDetails,
			formatDomain,
		};
	},
});
</script>

<style scoped lang="scss">
.fillings-container {
	height: auto;
}
</style>
